<template>
	<div class="flex">
		<ul>
			<li v-for="(item, index) in steps" :key="index">
				<strong
					>步骤 <span>{{ item.orderNum }}</span></strong
				>
				<div class="pic_Box">
					<img :src="getImages(item.imgUrl)" alt="" />
				</div>
				<p>{{ item.content }}</p>
			</li>
		</ul>
	</div>
</template>

<script>
export default {
	name: 'FoodDetailInfoStep',
	props: {
		steps: {
			require: true,
		},
	},
};
</script>

<style scoped>
.flex {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	height: auto;
	padding: 10px 20px 0px 25px;
}
ul li {
	margin-bottom: 20px;
}
ul:last-child {
	margin-bottom: 50px;
}
ul li strong {
	font-size: 18px;
}
ul li .pic_Box {
	width: 100%;
	overflow: hidden;
	margin: 10px 0 10px 0;
}
ul li .pic_Box img {
	width: 100%;
	border-radius: 10px;
	pointer-events: none;
}
ul li p {
	font-size: 14px;
	font-weight: 500;
	text-indent: 2rem;
}
</style>
